<template>
  <div class="details">试卷分析&学习策略</div>
  <div class="echartslistname">
    <div class="echatyslist">
      <!-- <Leida1 /> -->
      <EchartsBing :echartsdata="props.knowledgeName" />
    </div>
    <div class="echatys-riglist">
      <EchartsZhu  :brknowledgesName="props.brknowledgesName" :rates="props.rates"/>
    </div>
  </div>

  <div class="details">学习建议</div>
  <div class="echarts-span">专属提分方案一对一解读</div>
  <div class="echarts-wenben">
    <span class="echarts-usname">{{info.ClassName}}</span> 同学，你好!<br />
    很高兴你能顺利完成本次名称为
    <span style="color: #fb6d30">{{info. SaveName }}</span>诊
    难度系数为
    <span style="color: #fb6d30"> {{info.DocDiff}}</span
    >的测试，AI多维诊断报告显示了你在本次诊断中的考点掌握情况，从雷达图可以看出本次测试的20
    道题目所涉及的考点你掌握了15%。根据本次AI诊断技告给出如下提分建议: <br />
    &nbsp;
    (1)预测第一提分空间为52分、根据本次诊断分析结果、结合历年考点考法大数据，AI精准推荐了快速有效提分的考点考法课程，通过学习相关课程后、如果掌握了对应的考点考法、具备了考
    试要求的关键能力，可在考试中提升52 分!<br />
    &nbsp;
    (2)在知识学情雷达中超过黄色线(常模曲线)并且到达边界、被蓝色覆盖部分对应的知识点，本测卷涉及的知识模块有限，这个部分并未显示，助学教练可以为你再次发送更多测卷，帮你挖掘优势长板，优化备考策略，提高效率。<br />
    &nbsp; (3)未被蓝色覆盖并在黄色线以内的部分，是你掌握比较薄弱的考点，也就是
    <span style="color: #fb6d30">
      <span v-for="(item,index) in props.brknowledgesName" :key="index">
        【{{ item }}】
      </span>
      </span
    >

    需要多花时间加强，这部分也是能够让你最快提分的知识点。<br />
    &nbsp;
    (4)蓝色区域超过黄色线但未到达雷达图边界的部分，对应的是你可以继续拔高的知识点，本测卷涉及的知识模块有限，这个部分并未显示，助学教练可以为你再次发送测卷，帮你进一步透析学科问题，给出最佳提分路径。<br />
    &nbsp;
    (5)在第3条建议中涉及的知识点通过学习提升达到黄色线后，还可进一步提升，达到黄色线以外，直至边界，这是你最后需要攻克的知识点，彻底消灭自己的劣势短板。及时诊断反馈，了解自己的学情对提升成绩非常重要，也是被证明最高效的学习方式。还可以选择其他相关试卷，看看更多知识点、考点的常握情况。祝你取得更好的成绩!加油!<br />
    <span class="echarts-p">
      学习规划师: <span class="echarts-name">戴莫力</span>
    </span>
  </div>

</template>
<script lang="ts" setup>
import EchartsZhu from "./echaets5/echartszhu.vue";
import EchartsBing from "./echaets5/echartsbing.vue";
import { ref, reactive, onMounted, watch } from "vue";

const props = defineProps<{
  knowledgeName: []
  brknowledgesName:[]
  rates:[]
  info:{}
}>();

onMounted(()=>{

})
</script>
<style lang="less" scoped>
.details {
  font-weight: 500;
  font-size: 17px;
  color: #03305c;
  text-decoration: underline;
  text-decoration-color: #0075ff;
}
.echartslistname {
  display: flex;
  margin: 1vw 0;
  justify-content: space-between;
  flex-wrap: wrap;
  height: auto;
}
.echatyslist {
  width: 49%;
  // height: 100%;
  border: 1px solid #ededed;
  img {
    width: 100%;
    height: 100%;
  }
}
.echatys-riglist {
  width: 49%;
  // height: 100%;
  //   background-color: pink;
  border: 1px solid #ededed;
  text-align: left;
}
.echarts-span {
  margin: 1vw 0;
  font-size: 13px;
}
.echarts-wenben {
  padding: 1vw;
  margin: 1vw 0;
  background-color: #f7fbff;
  // background-color: pink;
  text-align: left;
  font-size: 14px;
  height: 100%;
}
.echarts-p {
  display: inline-block;
  width: 100%;
  margin-top: 2vw;
  text-align: right;
}
.echarts-name {
  font-size: 2vw;

  // font-family: 楷体;
}
.echarts-usname {
    font-size: 1.3vw;
    // font-family: 楷体;
    color: #fb6d30
}
@media (max-width: 735px) {
  .echatyslist {
  width: 100%;
  min-height: 60vh;
  border: 1px solid #ededed;
  img {
    width: 100%;
    height: 100%;
  }
}
.echatys-riglist {
  width: 100%;
  min-height: 60vh;
  //   background-color: pink;
  // padding: 20px;
  text-align: left;
}
.echartslistname {
  display: flex;
  margin: 1vw 0;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
}
}

</style>
